<!-- 阿里播放器 -->

<template>
  <div :id="id" :class="className" />
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'
import H5Player from '../H5Player'

// ============================== 导出组件 ============================== //

export default CORE.extend(H5Player, {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'AliPlayer',

  /**
   * 状态数据
   */
  data() {
    return {
      ...H5Player.data.call(this),

      ALI_CONFIG: {}, // 阿里配置
    }
  },

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    ...H5Player.computed,

    /**
     * 开始参数
     */
    startParam() {
      const { ALI_CONFIG, id, value: source } = this
      return { ...ALI_CONFIG, id, source }
    },
  },

  /**
   * 本地方法 (轻量重要在前)
   */
  methods: {
    ...H5Player.methods,

    /**
     * 加载
     */
    async load() {
      await CORE.loadCSS(CORE.common('js/aliplayer/skins/default/aliplayer-min.css'), '阿里播放器')
      await CORE.loadJS(CORE.common('js/aliplayer/aliplayer-min.js'), '阿里播放器')

      this.ALI_CONFIG = await CORE.loadJSON(CORE.asset('ALI_CONFIG.json'))

      this.loaded = true
    },

    /**
     * 开始
     */
    start() {
      // 如存在，则先销毁
      this.player && this.player.dispose()

      // 初始化
      this.player = new window.Aliplayer(this.startParam)

      // 监听截图
      this.player.on('snapshoted', function ({ paramData: { base64 } }) {
        CORE.imageSave(base64, `视频截图 ${CORE.fileName().slice(0, 19)}.png`)
      })
    },

    /**
     * 停止
     */
    stop() {
      if (this.player) {
        this.player.dispose()
        this.player = null
      }
    },
  },
})
</script>
